<template>
  <div class="Page_HomeStyleFrom">
    <div class="Page_HomeHeadPortrait">
      <p><img src="../../assets/a.png.png" alt="" /></p>
      <h1>管理后台</h1>
    </div>
    <div class="Page_HeadStyleAdd">
      <a-button
        style="width: 160px; margintop: 10px"
        type="primary"
        shape="round"
        :size="size"
      >
        <template #icon>
          <star-two-tone two-tone-color="#eb2f96" />
          新建
        </template>
      </a-button>
    </div>
    <div class="Page_HeadRouteLink">
      <router-link class="Page_HeadRouteTitle" to="/home"><setting-outlined />&nbsp;工作台</router-link>
    </div>
    <div class="Page_ContextFromNav">
      <a-button class="Page_ContextFromBtn" type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
    
    <a-menu
       :openKeys="openKeys"
       :selectedKeys="selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
    >
    <a-sub-menu class="From_Article" key="sub1">
        <template #icon>
          <MailOutlined />
        </template>
        <template #title >文章管理</template>
        <a-menu-item key="5"><router-link to="/list">所有文章</router-link></a-menu-item>
        <a-menu-item key="6"><router-link to="/classify">分类管理</router-link></a-menu-item>
        <a-menu-item key="7">标签管理</a-menu-item>
      </a-sub-menu>
      <a-menu-item key="1">
        <template #icon>
          <PieChartOutlined />
        </template>
        <span>页面管理</span>
      </a-menu-item>
      <a-menu-item key="2">
        <template #icon>
          <DesktopOutlined />
        </template>
        <span>知识小册</span>
      </a-menu-item>
      <a-menu-item key="3">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>海报管理</span>
      </a-menu-item>
      <a-menu-item key="4">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>评论管理</span>
      </a-menu-item>
       <a-menu-item key="5">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>邮箱管理</span>
      </a-menu-item>
        <a-menu-item key="6">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>文件管理</span>
      </a-menu-item>
        <a-menu-item key="7">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>搜索记录</span>
      </a-menu-item>
       <a-menu-item key="8">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>访问统计</span>
      </a-menu-item>
      <a-menu-item key="9">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>用户管理</span>
      </a-menu-item>
      <a-menu-item key="10">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>系统设置</span>
      </a-menu-item>
    </a-menu>
    </div>
  </div>
</template>

<script>
import { defineComponent,ref , reactive, toRefs, watch } from 'vue';
import { MenuFoldOutlined, MenuUnfoldOutlined, PieChartOutlined, MailOutlined, DesktopOutlined, InboxOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
import {  StarTwoTone,SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    StarTwoTone,
    SettingOutlined,
     MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
  },

  setup() {
    const state = reactive({
      collapsed: false,
      selectedKeys: ['1'],
      openKeys: ['sub1'],
      preOpenKeys: ['sub1'],
    });
    watch(() => state.openKeys, (_val, oldVal) => {
      state.preOpenKeys = oldVal;
    });

    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed;
      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
    };

    return {
      size: ref("large"),
       ...toRefs(state),
      toggleCollapsed,
    };
  },
});
</script>

<style>
.Page_HomeStyleFrom {
  width: 100%;
  height: 100%;
}
.Page_HomeHeadPortrait {
  width: 100%;
  height: 60px;
  margin-top: 20px;
  display: flex;
  align-content: center;
  justify-content: space-around;
}
.Page_HeadStyleAdd {
  width: 100%;
  height: 60px;
  margin-top: 10px;
}
.Page_HomeHeadPortrait > h1 {
  font-weight: normal;
  color: #fff;
}
.Page_HomeHeadPortrait > p > img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.Page_HeadRouteLink {
  width: 100%;
  height: 30px;
  padding: 15px 50px;
  margin-top: 10px;
}
.Page_HeadRouteTitle{
  font-size: 18px;
  color: #0188fb;
}
.Page_ContextFromNav{
  width: 100%;
  height: auto;
  padding: 15px 30px;
  margin-top: 10px;
}
.Page_ContextFromBtn{
  position: absolute;
  top: 10px;
  left: 200px;
}
.From_Article{
  width: 140px;
}
</style>